<template>
  <view class="container">
    <!-- 常见问题区域 -->
    <view class="faq-container">
      <text class="section-title">常见问题</text>
      
      <!-- 问题列表 -->
      <view class="faq-list">
        <view 
          v-for="(item, index) in faqs" 
          :key="index" 
          class="faq-item"
          @click="toggleFaq(index)"
        >
          <!-- 问题部分 -->
          <view class="faq-question">
            <text class="question-text">{{ item.question }}</text>
            <image 
              class="arrow-icon" 
              :src="item.expanded ? baseUrl+'assets/img/allow-up.png' : baseUrl+'assets/img/allow-down.png'"
              mode="widthFix"
            ></image>
          </view>
          
          <!-- 答案部分（展开/收起） -->
          <view class="faq-answer" :class="{ 'expanded': item.expanded }">
            <view class="answer-text" v-if="item.id==1">
				有时候由于网络延迟等原因，导致付款后不开闸，请后退后重新识别，如果提示还需要二次付费，请付费后再申请退费，参考第2条。
			</view>
			<view class="answer-text" v-if="item.id==2">
				<text>请按照下面图片演示的步骤申请退款，管理员确认后在第二个工作日发起退款，节假日延后。</text>
				<image :src="baseUrl+'assets/img/toushu.jpg'" style="width: 100%;" mode="widthFix"></image>
			</view>
			<view class="answer-text" v-if="item.id==3">
				<view style="margin-bottom: 20rpx;">当前小程序是停车场道闸设备与管理系统提供服务商，我们不是停车场，您支付的停车费会流向停车场的账户下，我们无法干预停车场的计费规则，如果遇到停车收费不合理的情况，可以拨打以下电话进行投诉。</view>
				<view style="margin-bottom: 20rpx;"><text style="font-weight: bold;">12345市民热线</text> - 这是政府服务热线，可受理停车收费不合理等各类民生问题投诉，能协调相关部门进行处理。</view>
				<view style="margin-bottom: 20rpx;"><text style="font-weight: bold;">12315消费者投诉举报专线电话</text> - 作为消费者投诉热线，可用于投诉停车场乱收费、停车位价格不合理等问题，消协可调解纠纷或移交执法部门处理。</view>
				<view style="margin-bottom: 20rpx;"><text style="font-weight: bold;">12358价格监管热线</text> - 该热线可用于举报价格违法行为，若停车场存在乱收费、不合理收费等情况，可拨打此电话</view>
				<view style="margin-bottom: 20rpx;">此外，若停车场未办理停车场经营许可证等，可向公安局交警大队投诉，投诉电话为110。</view>
			</view>
			<view class="answer-text" v-if="item.id==4">
				<view style="margin-bottom: 20rpx;">停车场与充电站一般不是同一个单位在运营，充电站会主动与停车场进行协商，对充电车辆停车费进行减免，充电车辆减免的费用会在月底通过账单的方式与停车场进行结算。</view>
				<view style="margin-bottom: 20rpx;">1、如果车主充电后没有减免停车费，主责应该找对应的充电站，因为减免停车费是充电站对车主的承若，找停车场没用，在小程序上投诉也没用。</view>
				<view style="margin-bottom: 20rpx;">2、充电完成后，充电站会发送充电订单给停车场，充电订单包含了充电的车牌号，充电时间等信息，然后停车场给对应车牌号发放停车券，如果你充电app没有绑定车牌号或者绑定的车牌号不是出入场的车牌号，都不会减免成功。</view>
				<view style="margin-bottom: 20rpx;">3、无牌车需要在充电app绑定车辆入场时公众号派发给你的，以“临”字开头的车牌号，才能推送成功。</view>
				<view style="margin-bottom: 20rpx;">4、有许多充电站为了防止车主趁费，所以限制了充电时间，需要达到一定的充电时间才能推送停车券。</view>
			</view>
			<view class="answer-text" v-if="item.id==5">
				<view style="margin-bottom: 20rpx;">1、LED屏幕提示：停留时间过短，这是为了防止相机拍到车尾异常开闸，这种情况耐心等待2分钟，再重新识别。</view>
				<view style="margin-bottom: 20rpx;">2、LED屏幕提示：系统异常或其他信息，请联系现场管理人员或者联系出场二维码上的电话号码。</view>
			</view>
			<view class="answer-text" v-if="item.id==6">
				<view style="margin-bottom: 20rpx;">当前小程序是停车场道闸设备与管理系统提供服务商，我们不是停车场，您支付的停车费会流向停车场的账户下。</view>
				<view style="margin-bottom: 20rpx;">开票，请首先尝试在小程序中点击“开票助手”，有的停车场不支持自动开票，需要联系停车场的财务人员，申请开票时会展示他们的联系方式。</view>
				<view style="margin-bottom: 20rpx;">如果上面的联系方式联系不上，可以尝试人工客服，我们帮你向停车场申请开票。</view>
			</view>
			<view class="answer-text" v-if="item.id==7">
				请咨询停车场管理人员，办公室人员，或者现场人员，我们是道闸与系统服务商，对每个停车场的月卡申请规则不清楚。
			</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 转人工客服按钮 -->
	<!-- #ifdef MP-WEIXIN -->
    <view class="contact-container">
      <button class="contact-btn" open-type="contact">
        <text class="btn-text">转人工客服</text>
      </button>
    </view>
	<!-- #endif -->
  </view>
</template>

<script>
import {baseUrl,methods} from '@/utils/core.js';
export default {
  data() {
    return {
	  baseUrl:baseUrl,
      // 常见问题数据
      faqs: [
        {
		  id:1,	
          question: "1、付款了不开闸？",
          expanded: false
        },
        {
		  id:2,	
          question: "2、重复付费怎么办？",
          expanded: false
        },
        {
		  id:3,	
          question: "3、收费不合理怎么办？",
          expanded: false
        },
        {
		  id:4,	
          question: "4、充电后没有减免停车费？",
          expanded: false
        },
		{
		  id:5,	
		  question: "5、出场时异常不开闸？",
		  expanded: false
		},
		{
		  id:6,	
		  question: "6、开发票问题？",
		  expanded: false
		},
		{
		  id:7,	
		  question: "6、如何办理月卡？",
		  expanded: false
		}
      ]
    };
  },
  methods: {
    // 切换问题的展开/收起状态
    toggleFaq(index) {
      this.faqs[index].expanded = !this.faqs[index].expanded;
    },
    
    // 转人工客服
    contactService() {
      // 这里可以跳转到人工客服页面或打开客服会话窗口
      uni.navigateTo({
        url: '/pages/customer-service/chat'
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 常见问题区域样式 */
.faq-container {
  padding: 16px;
  flex: 1;
}

.section-title {
  font-size: 16px;
  color: #666;
  margin-bottom: 12px;
  display: block;
}

.faq-list {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}

.faq-item {
  border-bottom: 1px solid #f5f5f5;
}

.faq-item:last-child {
  border-bottom: none;
}

/* 问题样式 */
.faq-question {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question-text {
  font-size: 15px;
  color: #333;
  line-height: 1.5;
  flex: 1;
  margin-right: 12px;
}

.arrow-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

/* 答案样式 */
.faq-answer {
  padding: 0 16px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-answer.expanded {
  padding: 0 16px 16px;
  max-height: 800px;
}

.answer-text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* 转人工客服按钮样式 */
.contact-container {
  padding: 16px;
  background-color: #f5f5f5;
}

.contact-btn {
  width: 100%;
  height: 48px;
  background-color: #007aff;
  color: #ffffff;
  border-radius: 24px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-text {
  color: #ffffff;
}
</style>
